<template>
    <div class="common-layout">
        <el-container>
          <el-header>
            <el-button size="small" type="primary" :icon="Plus" @click="handleAdd(-1)">新建</el-button>
            <el-button size="small" type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
            <el-button size="small" type="success" :icon="RefreshLeft" @click="getList">刷新</el-button>
            <el-input v-model="findstr" size="small" style="width: 300px; margin-left: 10px;" placeholder="请输入内容">
                <template #append>
                    <el-button size="small" >模糊查询</el-button>
                </template>
            </el-input>
          </el-header>
          <el-main>
            <el-row>
                <el-col :span="16" style=" height: calc(100vh - 154px);" >
                    <vxe-table
                        border
                        show-header-overflow
                        show-overflow
                        ref="Combo"
                        size="mini"
                        :loading="loading"
                        height="auto"
                        :row-config="{isHover: true,isCurrent: true}"
                        @current-change="handleSelectionChange"
                        :data="lkComboList">
                        <vxe-column title="下拉规范名称" align="center" field="comboName"></vxe-column>
                        <vxe-column title="数据源类型" align="center" field="comboType">
                            <template #default="{row}">
                                {{row.comboType===1?'固定取值':'来自数据表'}}
                            </template>
                        </vxe-column>

<!--                        <vxe-column title="启用" align="center" field="iSActive"></vxe-column>-->
                    </vxe-table>
                </el-col>
                <el-col :span="8">
                    <el-form ref="formert" :model="form" size="small" label-width="100px">
                        <el-form-item label="下拉规范名称">
                            <el-input style="width:230px" v-model="form.comboName"></el-input>
                        </el-form-item>
                        <el-form-item label="数据源">
                            <el-radio-group v-model="form.comboType">
                              <el-radio :label="1">固定取值</el-radio>
                              <el-radio :label="2">来自数据表</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" resize="none" v-model="form.memo"></el-input>
                        </el-form-item>
                        <el-form-item >
                            <el-checkbox v-model="form.iSUnique">排队重复值</el-checkbox><el-checkbox v-model="form.sortable">是否排序</el-checkbox>
                        </el-form-item>
                    </el-form>
                    <div class="m-tb">
                        <el-button size="small" @click="item(1)">新建</el-button>
                        <el-button size="small" @click="item(0)">删除</el-button>
                    </div>
                    <vxe-table
                        border
                        show-header-overflow
                        show-overflow
                        ref="items"
                        size="mini"
                        height="350"
                        keep-source
                        :row-config="{isHover: true,isCurrent: true}"
                        :edit-config="{trigger: 'click', mode: 'cell'}"
                        :data="lkComboItems">
                        <vxe-column title="节点名称"  field="content" :edit-render="{name: '$input',}"></vxe-column>
                        <vxe-column title="节点值"  field="value" :edit-render="{}">
                        <template #edit="{ row }">
                            <vxe-input v-model="row.value" suffix-icon="el-icon-document-copy"  @suffix-click="()=>{row.value=row.content;$refs.items.reloadRow(row,row,'')}"></vxe-input>
                        </template>
                        </vxe-column>
                    </vxe-table>
                    <div class="m-tb">
                        <el-button type="primary" size="small" @click="submitForm">保存</el-button>
                    </div>
                </el-col>
            </el-row>            
          </el-main>
        </el-container>
    </div>
</template>

<script>
import {ref,reactive,toRefs,onBeforeMount} from "vue"
import {Delete,Plus,RefreshLeft} from '@element-plus/icons-vue'
import {listLkCombo,getLkCombo,updateLkCombo,delLkCombo} from "/@/api/linkoo/lkCombo"
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    setup(props) {
        let form= ref({})
        let state = reactive({
            loading:false,
            lkComboList:[],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 1000,
            },
            // 表单校验
            rules: {},
            lkComboItems: [],
            findstr:'',
            open: false,
            title: '',
        })
        onBeforeMount(()=>{
            getList()
            reset()
        })
        const getList=()=> {
            state.loading = true
            listLkCombo(state.queryParams).then(response => {
                state.lkComboList = response.data.list
                state.total = response.data.total
                state.loading = false
            })
        }
        const reset=()=> {
            form.value = {
                comboID: 0,
                comboName: null,
                comboType: null,
                iSUnique: null,
                filterExpr: undefined,
                tableID: undefined,
                tableName: undefined,
                valueFieldID: undefined,
                valueFieldName: undefined,
                sortFieldID: undefined,
                sortFieldName: undefined,
                sortType: undefined,
                sortable: undefined,
                createUser: undefined,
                createTime: undefined,
                iSActive: undefined,
                memo: undefined
            }
        }
        const handleSelectionChange=({ row})=> {
            getLkCombo(row.comboID).then(res=>{
                form.value=res.data.info
                state.lkComboItems=res.data.info.items
            })
            // this.ids = selection.map(item => item.comboID)
            // this.single = selection.length != 1
            // this.multiple = !selection.length
        }
        let formert = ref(null)
        let items = ref(null)
        const submitForm =()=>{
            formert.value.validate(valid => {
                if (valid) {
                form.value.items=items.value.getTableData().fullData
                    updateLkCombo(form.value,form.value.comboID).then(response => {
                    if (response.code === 0) {
                        ElMessage({
                            type: 'success',
                            message: `修改成功`,
                        })
                        state.open = false
                        getList()
                    } else {
                        ElMessage({
                            type: 'error',
                            message: response.msg,
                        })
                    }
                    })
                }
            })
        }
        const item=(i)=>{
            switch (i){
                case 1:
                items.value.insertAt({content:''}, -1)
                break
                case 2:
                break
                case 3:
                break
                case 0:
                const d=items.value.getCurrentRecord()
                items.value.remove(d)
                break
            }
        }
        const handleAdd = ()=>{
            reset()
            state.open = true
            state.title = '添加下拉框'
        }
        let Combo = ref(null)
        const handleDelete =()=>{
            const row=Combo.value.getCurrentRecord()
            console.log(row);
            if(row!=null){
                const comboIDs = row.comboID
                ElMessageBox.confirm('是否确认删除下拉框"' + row.comboName + '"的数据项?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(function() {
                    return delLkCombo(comboIDs)
                }).then(() => {
                    getList()
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                }).catch(function() {
                })
            }else{
                ElMessage({
                        type: 'error',
                        message: '请选择删除项！！',
                    })
            }
        }
        return{
            Delete,
            form,
            items,
            Plus,
            formert,
            Combo,
            RefreshLeft,
            ...toRefs(state),
            getList,
            reset,
            handleSelectionChange,
            submitForm,
            item,
            handleAdd,
            handleDelete
        }
    }
}
</script>

<style scoped>
    .el-header,.el-main{
    margin: 0;padding: 0;
}
    .el-header{
        height: auto;
        padding-bottom: 10px;
    }
    .m-tb{
        padding: 10px;
        background-color: rgb(255, 255, 255);
    }

</style>